<template>
  <div class="article-success-container">
    <el-card shadow="never">
      <h4>文章发布流程</h4>
      <el-steps :active="3" align-center style="margin-top: 20px;" finish-status="success">
        <el-step title="创作内容"></el-step>
        <el-step title="发布文章"></el-step>
        <el-step title="发布成功"></el-step>
      </el-steps>
    </el-card>
    <el-card shadow="never" class="result-container">
      <el-result subTitle="在这片虚拟的个人天地里，感谢自己的坚持与创作。文字已经找到它在网络宇宙中的家园，这是自己对心灵的一次完美敬意。">
        <template slot="icon">
            <i class="el-icon-circle-check icon"></i>
        </template>
        <template slot="title">
            <div class="title">发布成功</div>
        </template>
        <template slot="extra">
          <el-button type="primary" size="small" icon="el-icon-s-order" @click="gotoArtcileList()">文章列表</el-button>
          <el-button type="info" size="small" icon="el-icon-edit" @click="gotoArticleEdit()">编辑文章</el-button>
          <el-button type="warning" size="small" icon="el-icon-s-promotion" @click="gotoArticleCreate()">再写一篇</el-button>
        </template>
      </el-result>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ArticleSuccess',

  data () {
    return {
      // 文章ID
      articleId: undefined
    }
  },

  created () {
    this.articleId = this.$route.params.articleId
  },

  methods: {
    // 跳转文章编辑页面
    gotoArticleEdit () {
      this.$router.replace('/article-content/article-edit/' + this.articleId)
    },
    // 跳转到文章列表页面
    gotoArtcileList () {
      this.$router.replace('/blog/article')
    },
    // 跳转到文章发布页面
    gotoArticleCreate () {
      this.$router.replace('/article-content/article-create')
    }
  }
}
</script>

<style lang="scss" scoped>
.article-success-container {
  margin: 20px;

  .result-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    height: calc(100vh - 300px);

    .icon {
      font-weight: 520;
      color: #52c41a;
      font-size: 72px;
      line-height: 72px;
      margin-bottom: 1rem;
    }

    .title {
      font-size: 24px;
      color: rgba(0,0,0,.85);
      font-weight: 700;
      line-height: 32px;
      margin-bottom: 1rem;
    }
  }
}
</style>
